<template>
  <div class="view-container" id="departmentList">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>部门管理</span>
        </div>
        <div class="header-form">
          <!--更多-->
          <!--<div class="header-form-item">
            <el-dropdown @command="handleCommand">
              <el-button type="default" :loading="delLoading">
                更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新</el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>-->
          <!--搜索-->
          <!--按标题查询-->
          <div class="header-form-item">
            <el-button plain type="danger" icon="el-icon-delete" :loading="delLoading" @click="delOne">删除</el-button>
          </div>
          <div class="header-form-item">
            <el-button plain type="primary" icon="el-icon-edit" @click="openEditDialog(true)">编辑</el-button>
          </div>
          <div class="header-form-item">
            <el-button plain type="success" @click="openEditDialog(false)">添加</el-button>
          </div>
<!--          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search"  @click="fetchData">查询</el-button>
          </div>-->
          <!--<div class="header-form-item title-search">
            <el-input v-model.trim="department.departmentName" placeholder="部门名称" clearable/>
          </div>-->
        </div>
      </div>
    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        row-key="departmentId"
        border
        default-expand-all
        :tree-props="{children: 'children'}"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center" />
        <el-table-column
          prop="departmentName"
          label="部门名称"
          align="left"
          sortable
        />
        <el-table-column
          prop="remark"
          label="备注"
          align="left"
          width="300"
          sortable
        />
        <el-table-column
          prop="sortIndex"
          label="序号"
          align="center"
          width="100"
          sortable
        />
      </el-table>
    </section>

    <department-common ref="save-page" @update="fetchData"></department-common>

  </div>
</template>

<script>
import departmentAPI from '@/api/system/department'
import departmentCommon from './common/departmentCommon'
import listMixin from '@/mixin/listMixin'
export default {
  name: 'DepartmentList',
  components:{departmentCommon},
  mixins: [listMixin],
  data() {
    return {
      mixinParams: {
        propertyName: 'departmentId',
        API: departmentAPI,
      },
    }
  },

  methods: {
    update(flag){
      this.fetchData()
    },
    fetchData() {
      departmentAPI.getList().then(res => {
        console.log(res)
        this.tableData = res.result
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style lang="scss">

  #departmentList {
    padding: 0;
    .el-dialog {
      width: 500px;
    }
  }

</style>
<style lang="scss" scoped>

</style>
